<template>
  <div class="login">
    <h1 class="title">登录知乎日报</h1>
    <div class="func">选择登陆方式</div>
    <van-form>
      <van-cell-group inset>
        <van-field v-model="phone" name="phone" label="手机号" placeholder="手机号" />
        <van-field v-model="password" type="password" name="password" label="密码" placeholder="密码" />
      </van-cell-group>
      <div class="btn">
        <van-button color="rgb(25, 137, 250)" @click="toLogin">登录</van-button>
        <van-button color="rgb(25, 137, 250)" plain @click="toReg">注册</van-button>
      </div>
    </van-form>
    <div class="icon">
      <div class="zhihu"></div>
      <div class="weibo"></div>
      <div class="pingguo"></div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      phone: "",
      password: "",
      user: {}
    };
  },
  methods: {
    toLogin() {
      if (this.password == "" || this.phone == "") {
        console.log("手机号或密码不能为空");
        return;
      }
      if (!localStorage.getItem("user")) {
        console.log("请先注册");
        return;
      }
      let LocalUser = JSON.parse(localStorage.getItem("user"));
      if (
        LocalUser.phone == this.phone &&
        LocalUser.password == this.password
      ) {
         this.$toast('登陆成功')
         this.$emit('close')
         localStorage.setItem('isLogin',true)
      } else {
        console.log("请先注册");
      }
    },
    toReg() {
      if (this.password == "" || this.phone == "") {
        console.log("手机号或密码不能为空");
        return;
      }
      this.user.phone = this.phone;
      this.user.password = this.password;
      localStorage.setItem("user", JSON.stringify(this.user));
      localStorage.setItem("isLogin", true);
      this.password = "";
      this.phone = "";
    }
  }
};
</script>
<style lang="less" scoped>
.van-button {
  margin: 10px;
}
.login {
  text-align: center;
  .title {
    font-size: 22px;
    letter-spacing: 1px;
  }
  .func {
    font-size: 13px;
    color: darkgray;
    margin-bottom: 20px;
  }
  .icon {
    justify-items: center;
    align-items: center;
    display: flex;
    .zhihu {
      margin-left: auto;
      width: 50px;
      height: 50px;
      background: url("../assets/zhihu.png") no-repeat center;
      background-size: 110%;
    }
    .weibo {
      margin: 20px;
      width: 50px;
      height: 50px;
      background: url("../assets/weibo.png") no-repeat center;
      background-size: 93%;
    }
    .pingguo {
      margin-right: auto;
      width: 50px;
      height: 50px;
      background: url("../assets/pinpaibiaoshi_pingguo.png") no-repeat center;
      background-size: 100%;
    }
  }
}
</style>